<template>
  <el-card class="user-custom-domain-container">
    <h3>活码域名</h3>
    <el-alert type="warning" show-icon>
      <template #title>
        为确保活码能够正常访问，在添加入口域名和落地域名前进行检测，检测是否被微信、QQ、钉钉等平台拦截！请前往
        <el-link type="default" @click.prevent="$router.push('/user-center/domain-detection')">域名检测</el-link>
      </template>
    </el-alert>
    <el-row height="400px" :gutter="40">
      <el-col :span="12">
        <div class="textarea-title">入口域名</div>
        <el-form :model="textFrom" @submit.native.prevent>
          <el-form-item>
<!--            <el-input type="textarea"  v-model="textFrom.textarea" placeholder="hm.huoma-9.store" resize="none"></el-input>-->
            <div class="left-form">
              <el-input
                class="input-new-tag"
                v-if="textFrom.inputVisible"
                v-model.trim="textFrom.inputValue"
                ref="textFromTagInput"
                size="small"
                @keyup.enter="$event.target.blur()"
                @blur="handleInputConfirm('1', textFrom.inputValue)"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput('5')">添加</el-button>
              <div class="el-tag-box">
<!--                <el-input class="input-new-tag" ref="editInputValue" v-if="textFrom.editField" v-model="textFrom.eaitInput" @keyup.enter.native="$event.target.blur()" @blur="editHandleInputConfirm('3')"-->
<!--                ></el-input>-->
                <el-tag
                  class="el-tag-item"
                  :key="tag.id"
                  v-for="tag in textFrom.dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag,'1')">
                  {{tag.domain}}
                </el-tag>
              </div>
            </div>
            <div class="from-textarea-text">
              <span>当前域名个数:</span>
              <span class="result-number">{{textFrom.entranceNum}}</span>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div class="textarea-title">落地域名</div>
        <el-form :model="result" @submit.native.prevent>
          <el-form-item>
            <!--            <el-input type="textarea"  v-model="textFrom.textarea" placeholder="hm.huoma-9.store" resize="none"></el-input>-->
            <div class="left-form">
              <el-input
                class="input-new-tag"
                v-if="result.inputVisible"
                v-model.trim="result.inputValue"
                ref="resultTagInput"
                size="small"
                @keyup.enter="$event.target.blur()"
                @blur="handleInputConfirm('2', result.inputValue)"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput('6')">添加</el-button>
              <div class="el-tag-box">
<!--                <el-input class="input-new-tag" style="height:32px;" ref="editResultInputValue" v-if="result.editField" v-model="result.eaitInput" @keyup.enter.native="$event.target.blur()" @blur="editHandleInputConfirm('4')"-->
<!--                ></el-input>-->
                <el-tag
                  class="el-tag-item"
                  :key="tag.id"
                  v-for="tag in result.dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag,'2')">
                  {{tag.domain}}
                </el-tag>
              </div>
            </div>
            <div class="from-textarea-text result-textear">
              <span>当前域名个数:</span>
              <span class="result-number">{{result.fallNum}}</span>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="card-footer">
          <div class="footer-title">域名绑定说明</div>
          <div class="text-color">1. 输入的域名要以http://和https://开头，末尾不要带有/，例如：http://www.1tz.com</div>
          <div class="text-color">2. 入口域名和落地域名不得重复</div>
          <div class="text-color">3. 可以不备案，但是一定要实名认证后才可以解析</div>
          <div>图文教程 域名购买/解析教程</div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { fallList, editDomainApi, addliveCodeApi, delliveCodeApi } from '@/axios/userRequest'
import { reactive, getCurrentInstance, nextTick }from 'vue'
import { useStore } from 'vuex'
let { proxy } = getCurrentInstance()
let Store = useStore()
let textFrom = reactive({
  textarea: '',
  entranceNum: 0,
  dynamicTags: [],
  inputVisible: false,
  inputValue: '',
  editField: false,
  eaitInput: '',
  id: '',
  oldEaitInput: ''
})

let result = reactive({
  textarea: '',
  fallNum: 0,
  dynamicTags: [],
  inputVisible: false,
  inputValue: '',
  editField: false,
  eaitInput: '',
  id: '',
  oldEaitInput: ''
})

//初始化数据
let init = async()=>{
  let {data:res,msg,code} = await fallList({type:[1,2]})
  if(code!==0) return  proxy.$message.error(msg)
  Store.commit('userStore/changeStoreState',['LiveCodeInDomainList',res.data['1']])
  textFrom.dynamicTags = res.data['1'].reverse()
  result.dynamicTags = res.data['2'].reverse()
  textFrom.entranceNum = textFrom.dynamicTags.length
  result.fallNum = result.dynamicTags.length
}
init()

//删除方法
let handleClose = async tag=>{
  let { msg,code } = await delliveCodeApi({
    domain:tag.domain, id:[tag.id]
  })
  if(code !=0) return proxy.$message.error(msg)
  proxy.$message.success(msg)
  await init()
}

let showInput = (num)=>{
  num ==='5'?textFrom.inputVisible = true:result.inputVisible = true
  nextTick(()=>{
    num ==='5'?proxy.$refs.textFromTagInput.$refs.input.focus():proxy.$refs.resultTagInput.$refs.input.focus();
  })
}

//添加方法
let handleInputConfirm = (type,value)=>{
  let urlReg = /^https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})$/
  if (!value) return type === '1' ? textFrom.inputVisible = false : result.inputVisible = false
  !urlReg.test(value) ? proxy.$message.error('域名格式有误。') : addDomain(type)
}
const addDomain = async type=>{
  let { code, msg } = await addliveCodeApi({
    domain:type === '1' ? textFrom.inputValue : result.inputValue,
    domain_type:type
  })
  if(code !=0) return proxy.$message.error(msg)
  proxy.$message.success(msg)
  await init()
  type === "1" ? textFrom.inputValue = '' : result.inputValue = ''
  type === "1" ? textFrom.inputVisible = false : result.inputVisible = false
}
</script>

<style lang="less" scoped>
</style>
